<template>
    <div class="carAttributively">
        <x-header class="car_header">
            <div slot="default" class="common__header--title">车辆归属地选择</div>
            <div @click="closeSele()" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/close1.png" class="go-back">
            </div>
            <div @click="setSele()" slot="right" class="common__header--title car-sure-color">确认</div>
        </x-header>
        <!-- <div class="register_errorMsg">
            <badge text="!"></badge> 本产品在以下地区销售,请选择车辆归属地
        </div> -->
        <div class="car_checker">
            <checker v-model="carCodeType" radio-required default-item-class="car__item" selected-item-class="car__item-selected common__bacolor--DefaultTheme">
                <div class="checker-span" v-for="(item, index) in carCodeList" :key="index">
                    <checker-item class="grid-center" :value="item.value">{{item.key}}</checker-item>
                </div>
            </checker>

        </div>
    </div>
</template>



<script>
import { Cell, Group, XHeader, Picker, GroupTitle, XButton, Checker, CheckerItem, Scroller, Tab, TabItem, Badge } from 'vux'
import Config from "src/common/config/insureConfig";
import { RequestUrl } from "src/common/url";
import { mapState, mapActions } from "vuex";
import {
    Mutations
} from "src/common/const";
export default {
    components: {
        Picker,
        GroupTitle,
        XButton,
        Cell,
        Group,
        XHeader,
        Checker,
        CheckerItem,
        Scroller,
        Tab,
        TabItem,
        Badge
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        indexSeleCountry: "seleCountry",
        isWeChar: "isWeChar",
        showSeleCountry: "showSeleCountry",
        seleValue: "seleValue"
    }),
    methods: {
        closeSele() {
            this.$emit('closeCarSele');
        },
        setSele() {
            this.$emit('closeCarSele');
        }

    },
    watch: {
        carCodeType(cur, old) {
            let data = cur;
            if (data == "浙-浙江" || data == "浙-宁波") {
                data = "浙";
            }
            this.$common.storeCommit(this, Mutations.SET_CAR_ADDR, data);
        }
    },
    data() {
        return {
            carCodeType: "浙",
            // carCodeList: [{ key: "重庆", value: "渝" },
            // { key: "北京", value: "京" },
            // { key: "浙江", value: "浙-浙江" },
            // { key: "山东", value: "鲁" },
            // { key: "广东", value: "粤" }, { key: "四川", value: "川" }, { key: "宁波", value: "浙-宁波" }]
            carCodeList: [],
        }
    },
    mounted() {
        this.$init.subPageInit(this);
        this.carCodeList = Config.getAxtxCar();

    }
}
</script>


<style lang="scss" >
// .car_checker {
//   height: 150px; // margin-left: 20px;
//   // margin-right: 20px;
// }

.car__item {
  // border: 1px solid #ececec;
  padding: 5px 5px;
  font-size: 15px;
  color: #999999 !important;
  border: 1px solid #999999;
  border-radius: 5px; // margin: 10px 20px;
  width: 100%;
  text-align: center;
}

.car__item-selected {
  // margin: 10px 20px; // background-color: #C8161D;
  font-size: 15px;
  color: #fff !important;
  border-radius: 5px;
}

.seleCountry__group {
  margin-top: -10px;
  box-shadow: 0px 0px 5px 1px #777777;
}

.checker-span {
  margin: 5px 2%;
  width: 10%;
  display: -webkit-inline-box;
}

.car_header {
  border-bottom: 1px solid #f0f0f0;
}

.register_errorMsg {
  color: #ff941a;
  font-size: 14px;
  margin-left: 10px;
  margin-bottom: -20px;
  line-height: 40px;
  height: 60px;
  text-align: center;
}
.car-sure-color {
  color: #C8161D !important;
}
.seleCou-item-selected {
  border: 2px solid #C8161D;
  border-radius: 3px;
  background: #ffffff url(~assets/x3/ico/close.png) no-repeat right top;
  margin-bottom: 5px;
}

.seleCou-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
  margin: 0px 3px;
  font-size: 14px;
  background: #ffffff url(~assets/x3/ico/close.png) no-repeat right top;
  margin-bottom: 5px;
}

.pinyinlist__navigation--right {
  position: fixed;
  top: 47px;
  right: 0px; // height: 100%;
  // width: 15px;
  padding-right: 10px;
  text-align: center;
  font-size: 12px;
  z-index: 99;
  background: rgba(145, 145, 145, 0);
}

.pinyinlist__navigation--right li img {
  width: 14px;
}

ul li {
  margin-bottom: -4px;
  list-style: none;
  a {
    color: #000;
  }
}

#pinyinlist__navigation--letter {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  font-size: 75px;
  color: #555;
  text-align: center;
  line-height: 100px;
  background: rgba(145, 145, 145, 0.6);
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -50px 0px 0px -50px;
  z-index: 99;
  display: none;
}

#pinyinlist__navigation--letter img {
  width: 50px;
  height: 50px;
  float: left;
  margin: 25px 0px 0px 25px;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>
